<template>
  <div class="Release">
    <div class="choose"><div><p>请选择目录</p><select  v-model="directory">
      <option v-for="value in toArray" :value="value.id">{{value.name}}</option>
    </select>
    </div>
      <button class="btn" @click="setPages">发布文章</button>
    </div>
    <div class="title"><input type="text" v-model="title" placeholder="文章标题"></div>
  <div>
    <FuWenBen id="tinymce" @release="release" ref="child"></FuWenBen>
  </div>

  </div>
</template>

<script>
import FuWenBen from "@/components/FuWenBen";
import Info from "@/components/Info";

export default {
  name: "ArticleRelease",
  data () {
    return {
          directory:'',
          toArray:[],
          title:''
    };
  },
  methods:{
    release(content){
      const  request = this.myCode();
      var config = {
        method:'post',
        url:'/AddBlogContent',
        data:{
           'api_token':localStorage.getItem('API'),
          'title':this.title,
          'did':this.directory,
          'content':content
        }
      }
      request(config).then(res=>{
         if(res.data.status == 200){
           alert('发布成功');
         }
      })
    },
    setPages(){
        this.$refs.child.release();
    }
  },
  created() {
    const  request = this.myCode();
    var config = {
      method:'get',
      url:'/GetDirectory',
      params:{}
    }
    request(config).then(res=>{
      this.toArray = res.data;
      this.directory = this.toArray[0].id;
    })
  },
  components:{
    Info,
    FuWenBen
  }
}
</script>

<style scoped>
 .Release{
   margin: 0;
   padding: 0;
   width: 100%;
   margin: 0 auto;
 }
 .choose{
   display: flex;
   margin-bottom: 20px;
   margin-top: 10px;
   justify-content: space-between;
   align-items: center;
 }
 .choose p{
   margin-right: 20px;
   font-size: 14px;
   font-family: 微软雅黑;
 }
 .choose select{
   width: 100px;
   height: 25px;
 }
 .title{
   margin-bottom: 20px;
 }
 .title input{
   width: 100%;
   height: 40px;
   box-sizing: border-box;
 }
 .choose div{
   display: flex;
 }
 .btn{
  cursor: pointer;
  width: 200px;
  background-color: #00669b;
  color: white;
  height: 40px;
  border: none;
  border-radius: 5px;
}

</style>